<template>
  <div class="page-card page-card-form">
    <h3>{{$route.meta.name}}{{dbType[type]}}</h3>
    <div class="back">
      <a-button type="default" @click="$router.go(-1)"><a-icon type="left" /> 返 回</a-button>
    </div>
    <br>
    <a-form-model ref="ruleForm" labelAlign="left" :model="form" :labelCol="{span: 2 }" :wrapperCol="{span: 20}" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="24">
          <a-form-model-item label="专项名称" :prop="type == 'detail' ? '':'specialName'">
            <a-input :class="[`forminput-${type}`]" style="width: 600px" :maxLength="50" size="large" v-model="form.specialName" placeholder="请输入专项名称"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="时间" :prop="type == 'detail' ? '':'time'">
            <!-- <a-input style="width: 600px" size="large" v-model="form.time" placeholder="请输入时间"></a-input> -->
            <a-date-picker
              size="large"
              :class="[`forminput-${type}`]"
              style="width: 600px"
              v-model="form.time"
              format="YYYY-MM-DD HH:mm:ss"
              :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
              @change="(e, time) => form.time = moment(time).format('YYYY-MM-DD HH:mm:ss')"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="部涉及门" :prop="type == 'detail' ? '':'depart'">
            <a-input :class="[`forminput-${type}`]" style="width: 600px" size="large" v-model="form.depart" placeholder="请输入部涉及门"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="备注">
            <a-textarea :class="[`forminput-${type}`]" :rows="5" style="width: 600px" size="large" v-model="form.remark" placeholder="请输入备注"></a-textarea>
          </a-form-model-item>
        </a-col>

        <a-col :span="24" v-if="type == 'detail'">
          <a-form-model-item label="审核状态">
            <span class="green" v-if="form.examine == 1">已通过</span>
            <span class="red" v-else-if="form.examine == 2">未通过</span>
            <span v-else>未审核</span>
          </a-form-model-item>
        </a-col>
        
        <a-col :span="24">
          
          <a-form-model-item label=" " :colon="false" v-if="type == 'detail' && (form.examine == 0 || form.examine == 2)">
            <a-space size="large">
              <a-button type="success" style="background: #1CAA59;color: #fff" @click="updateEnforcementExamine(1)">审核通过</a-button>
              <a-button type="danger"  @click="updateEnforcementExamine(2)">审核拒绝</a-button>
              <a-button type="default" @click="$router.go(-1)">取 消</a-button>
            </a-space>
          </a-form-model-item>
          <a-form-model-item label=" " :colon="false" v-else-if="type != 'detail'">
            <a-space size="large">
              <a-button type="primary" @click="submit">确 认</a-button>
              <a-button type="default" @click="$router.go(-1)">取 消</a-button>
            </a-space>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </div>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line
import { addSpecialRectification, editSpecialRectification, getSpecialRectificationDetail, updateSpecialRectificationExamine } from '@/api/db';
import cloneDeep from 'lodash/cloneDeep';
import { mapState } from 'vuex';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          // detailAccount().then(res => {
          //   this.form = res.data || {};
          //   this.$set(this.form, 'isLayered', !!this.form.isLayered);
          // });
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      form: {
        time: null
      },
      type: 'add',
      rules: {
        specialName: [{ required: true, message: '请输入' }],
        time: [{ required: true, message: '请输入' }],
        depart: [{ required: true, message: '请输入' }]
      }
    };
  },
  computed: {
    ...mapState({
      dbType: state => state.user.dbType
    })
  },
  created() {
    const { id, type } = this.$route.query
    if (id) {
      this.form.id = id
      this.type = 'edit'
      this.getDetail()
    }
    if (type == 'detail') {
      this.type = 'detail'
    }
  },
  methods: {
    getDetail() {
      getSpecialRectificationDetail({id: this.form.id}).then(res => {
        this.form = res.data
      })
    },
    add() {
      // const that = this;
      this.type = 'add';
      this.$nextTick(() => {
        this.form = {};
        this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
      });
    },
    edit(form) {
      this.type = 'edit';
      this.form = { ...this.form, ...form };
    },
    changeTime(s, m) {
      console.log(s, m);
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addSpecialRectification(this.form).then(res => {
              this.$message.success('创建成功');
              this.$router.go(-1)
            });
          } else if (this.type == 'edit') {
            editSpecialRectification(this.form).then(res => {
              this.$message.success('编辑成功');
              this.$router.go(-1)
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    updateEnforcementExamine(examine) {
      const that = this
      this.$confirm({
        content: `确定要审核${examine == 1 ? '通过' : '不通过'}吗？`,
        onOk() {
          updateSpecialRectificationExamine({
            id: that.form.id,
            examine
          }).then(res => {
            that.$message.success('审核完成！')
            that.$router.go(-1)
          })
        }
      });
    }
  }
};
</script>

<style>

</style>
